<template>
  <div class="jiesuan">
    <div class="shang">
      <div class="title">结算数据</div>
      <div class="shang-item-box">
        <div class="shang-item">
          <div class="zi">总金额</div>
          <div class="num">{{topdata.total_balance}}</div>
        </div>
        <div class="shang-item" style="background:#F57974;">
          <div class="zi">可用提现金额</div>
          <div class="num">{{topdata.balance}}</div>
          <div class="sqtx" @click="showtixianTc">申请提现</div>
        </div>
        <div class="shang-item">
          <div class="zi">累计提现金额</div>
          <div class="num">{{topdata.withdraw_count}}</div>
        </div>
      </div>
    </div>

    <div class="xia">
      <div class="title-box">
        <div class="title">结算数据</div>
        <div class="danwei">单位：元</div>
      </div>
      <div class="biaoge">
        <div class="biaotou">
          <div class="biaotou-item">申请时间</div>
          <div class="biaotou-item">提现金额</div>
          <div class="biaotou-item">提现方式</div>
          <div class="biaotou-item">提现账号</div>
          <div class="biaotou-item">审核状态</div>
          <!-- <div class="biaotou-item">操作</div> -->
        </div>

        <div class="bodybox">
          <div class="biaotou" v-for="(item,index) in list" :key='index'>
            <div class="biaotou-item-body">{{item.created_at}}</div>
            <div class="biaotou-item-body">{{item.balance}}</div>
            <div class="biaotou-item-body">{{item.type}}</div>
            <div class="biaotou-item-body">{{item.account}}</div>
            <div class="biaotou-item-body">{{item.status}}</div>
          </div>
        </div>

        <img v-if="list.length==0" class="juzhong" src="../assets/tixian/t5.png" alt />
      </div>
    </div>

    <div class="tixiantc" v-if="showtixiantc==true">
      <div class="head">
        <div class="tx-title">申请提现</div>
        <img @click="noshowtixianTc" src="../assets/tixian/t1.png" alt />
      </div>

      <div class="inputbox">
        <div class="lablezi">提现金额</div>
        <input v-model="jine" class="inputborder" type="text" />
        <div class="caozuo" @click="tiquanbu">全部提现</div>
      </div>

      <div class="inputbox1" style="height:77px;">
        <div class="lablezi">提现方式</div>
        <div class="leftbox">
          <div class="leftboxitem">
            <div class="leftbox-left">
              <img style="margin-right:10px;" src="../assets/tixian/t3.png" alt />
              <div class="tishiw">提现到支付宝</div>
            </div>
            <img v-if="paytype==1"  src="../assets/tixian/t4_s.png" alt />
             <img v-if="paytype!=1" @click="qiehuantype(1)" src="../assets/tixian/t4.png" alt />
          </div>
          <div class="leftboxitem">
            <div class="leftbox-left">
              <img style="margin-right:10px;" src="../assets/tixian/t2.png" alt />
              <div class="tishiw">提现到微信</div>
            </div>
            <img v-if="paytype==2" src="../assets/tixian/t4_s.png" alt />
             <img v-if="paytype!=2"  @click="qiehuantype(2)" src="../assets/tixian/t4.png" alt />
          </div>
        </div>
      </div>

      <div class="inputbox" v-if="paytype==2">
        <div class="lablezi">微信账号</div>
        <input v-model="zhanghao" class="inputborder" type="text" />
      </div>

       <div class="inputbox" v-if="paytype==1">
        <div class="lablezi">支付宝账号</div>
        <input v-model="zhanghao" class="inputborder" type="text" />
      </div>

      <div class="inputbox">
        <div class="lablezi">确认账号</div>
        <input v-model="querenzhanghao" class="inputborder" type="text" />
      </div>

      <div class="bottom-button">
        <div class="quxiao" @click="noshowtixianTc">取消</div>
        <div class="tijiao" @click="tijiaotixian">提交</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // key: value
      showtixiantc: false,
      topdata: "",
      list:'',
      paytype:1,


      jine:"",
      zhanghao:"",
      querenzhanghao:"",
    };
  },
  mounted() {
    if(!localStorage.getItem('uqid')){
      this.$router.push({ path: "/login", query: {  } });
      return
    }
    this.gettixian_sj();
    this.getlist();
  },
  methods: {
      //提交提现

    tijiaotixian(){
        // media/hairs/withdraw_add
         if (this.jine == "") {
          this.$message({
            showClose: true,
            message: "提现金额不能为空",
            type: "error"
          });
          return;
        }
         if (this.zhanghao == "") {
          this.$message({
            showClose: true,
            message: "账号不能为空",
            type: "error"
          });
          return;
        }
         if (this.querenzhanghao == "") {
          this.$message({
            showClose: true,
            message: "确认账号不能为空",
            type: "error"
          });
          return;
        }
        if(this.querenzhanghao!=this.zhanghao){
            this.$message({
                showClose: true,
                message: "请确认账号是否一致",
                type: "error"
            });
          return;
        }

         this.$axios({
          method: "post",
          url: "media/hairs/withdraw_add",
          data: this.$qs.stringify({
            uqid:localStorage.getItem('uqid'),
            balance:this.jine,
            type:this.paytype,
            account:this.zhanghao
          }),
          headers: {
            "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8"
          }
        }).then(response => {
          console.log(response);
          if (response.data.error == "0") {
            this.$message({
              showClose: true,
              message: '提交成功等待审核',
              type: "error"
            });
            this.showtixianTc==false
            this.getlist()
            this.gettixian_sj()
          } else {
            this.$message({
              showClose: true,
              message: response.data.message,
              type: "error"
            });
          }
        });
        
    },
    tiquanbu(){
     this.jine=this.topdata.balance
    },
    qiehuantype(index){
        this.paytype=index
    },
    showtixianTc() {
      this.showtixiantc = true;
    },

    noshowtixianTc() {
      this.showtixiantc = false;
    },

    gettixian_sj() {
      // media/hairs/withdraw_data
      this.$get(
        // method: "get",
        "media/hairs/withdraw_data",
        {
          uqid: localStorage.getItem("uqid")
        }
      ).then(response => {
        console.log(response);
        if (response.error == "0") {
          this.topdata = response.data;
        } else {
          this.$message({
            showClose: true,
            message: response.data.message,
            type: "error"
          });
        }
      });
    },

    getlist() {
      this.$get(
        // method: "get",
        "media/hairs/withdraw_data_list",
        {
          uqid: localStorage.getItem("uqid"),
          page: 1,
          limit: 1000
        }
      ).then(response => {
        console.log(response);
        if (response.error == "0") {
          this.list = response.data;
        } else {
          this.$message({
            showClose: true,
            message: response.data.message,
            type: "error"
          });
        }
      });
    }
  }
};
</script>

<style scoped>
.bodybox::-webkit-scrollbar {
  display: none;
}
.bodybox {
  max-height: calc(100% - 66px);
  overflow: hidden;
  overflow-y: scroll;
  position: relative;
}
.juzhong {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.biaotou-item-body {
  width: 20%;
  height: 46px;
  text-align: center;
  line-height: 46px;
  font-size: 12px;
  color: rgba(51, 51, 51, 1);
}
.biaotou-item {
  width: 20%;
  height: 46px;
  text-align: center;
  line-height: 46px;
  font-size: 14px;
  font-weight: 550;
  color: rgba(38, 106, 255, 1);
  background: rgba(231, 237, 252, 1);
}
.biaoge {
  width: 100%;
  height: calc(100% - 64px);
  border-top: 1px solid rgba(231, 237, 252, 1);
  border-left: 1px solid rgba(231, 237, 252, 1);
  border-right: 1px solid rgba(231, 237, 252, 1);
  position: relative;
}

.biaotou {
  width: 100%;
  height: 46px;
  border-bottom: 1px solid rgba(231, 237, 252, 1);

  opacity: 1;
  display: flex;
}
.tishiw {
  font-size: 12px;

  font-weight: 300;
  line-height: 12px;
  color: rgba(92, 92, 92, 1);
}
.tijiao {
  width: 62px;
  height: 26px;
  background: rgba(38, 106, 255, 1);

  border-radius: 4px;
  font-size: 14px;

  font-weight: 400;
  line-height: 26px;
  color: rgba(255, 255, 255, 1);
  text-align: center;
}
.quxiao {
  width: 62px;
  height: 26px;
  background: rgba(255, 255, 255, 1);
  border: 1px solid rgba(172, 172, 172, 1);

  border-radius: 4px;
  font-size: 14px;

  font-weight: 400;
  line-height: 26px;
  color: rgba(172, 172, 172, 1);
  text-align: center;
  margin-right: 20px;
}
.bottom-button {
  display: flex;
  justify-content: flex-end;
  margin-top: 25px;
}
.leftbox-left {
  display: flex;
  align-items: center;
}
.leftboxitem {
  display: flex;
  justify-content: space-between;
  width: 378px;
  align-items: center;
}
.leftbox {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.inputborder {
  width: 300px;
  height: 30px;
  background: rgba(255, 255, 255, 1);
  border: 1px solid rgba(38, 106, 255, 1);
  opacity: 1;
  border-radius: 2px;
  line-height: 30px;
  font-size: 14px;
  text-indent: 28px;
  margin-right: 5px;
}
.caozuo {
  font-size: 10px;
  font-weight: 400;
  line-height: 14px;
  color: rgba(38, 106, 255, 1);
}
.lablezi {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: rgba(51, 51, 51, 1);
  margin-right: 25px;
  width:70px;
}
.inputbox1 {
  display: flex;

  height: 30px;
  margin-top: 25px;
}

.inputbox {
  display: flex;
  align-items: center;
  height: 30px;
  margin-top: 25px;
}
.head {
  height: 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.tx-title {
  font-size: 16px;
}
.tixiantc {
  box-sizing: border-box;
  width: 499px;
  height: 389px;
  background: rgba(255, 255, 255, 1);
  border: 1px solid rgba(231, 237, 252, 1);
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
  /* opacity:1; */
  border-radius: 4px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 16px 12px;
}
.danwei {
  font-size: 15px;

  font-weight: 400;
  line-height: 100px;
  color: rgba(172, 172, 172, 1);
}
.title-box {
  display: flex;
  justify-content: space-between;
  overflow: hidden;
  height: 64px;
}

.xia {
  /* flex: 1; */
  height: calc(100% - 267px);
  width: 100%;
  margin-top: 18px;
  background: rgba(255, 255, 255, 1);
  padding: 0 19px;
  box-sizing: border-box;
  /* display: flex;
    flex-direction: column; */
}
.sqtx {
  width: 87px;
  height: 32px;
  border: 1px solid rgba(255, 255, 255, 1);
  border-radius: 10px;
  font-size: 14px;
  font-weight: 400;
  text-align: center;
  line-height: 32px;
  color: rgba(255, 255, 255, 1);
  box-sizing: border-box;
}
.shang-item .zi {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: rgba(255, 255, 255, 1);
}
.shang-item .num {
  font-size: 22px;
  font-weight: 400;
  line-height: 30px;
  color: rgba(255, 255, 255, 1);
  margin-top: 14px;
}
.shang-item {
  width: 33.33%;
  margin-right: 24px;
  background: #6171fc;
  height: 148px;
  /* background:rgba(245,121,116,1); */
  opacity: 1;
  border-radius: 20px;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
}
.shang-item-box {
  width: 100%;
  display: flex;
  height: 148px;
}
.title {
  height: 64px;
  line-height: 64px;
  font-size: 16px;
  font-weight: 550;
}
.shang {
  width: 100%;
  height: 249px;
  background: rgba(255, 255, 255, 1);
  opacity: 1;
  padding-left: 19px;
  box-sizing: border-box;
  padding-bottom: 37px;
}

.jiesuan {
  width: 100%;
  height: calc(100% - 118px);
  /* overflow-y: scroll;
  overflow-x: hidden; */
  display: flex;
  flex-direction: column;
}
.jiesuan::-webkit-scrollbar {
  display: none;
}
</style>